<template>
  <div>
    <el-button
      class="but1"
      type="primary"
      round
      @click="dialogFormVisible = true"
      >发布招聘信息</el-button
    >
    <!--添加职位功能-->
    <el-dialog
      title="编辑"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      @close="closeDialog('addRef')"
    >
      <el-form status-icon :model="add" ref="addRef" label-width="70px">
        <el-form-item label="职位名称" prop="job">
          <el-input type="text" v-model="add.job"></el-input>
        </el-form-item>
        <el-form-item label="截止日期" prop="validTime">
          <el-date-picker
            v-model="add.validTime"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
          <!-- <el-input type="text" v-model="add.validTime"></el-input> -->
        </el-form-item>
        <el-form-item label="职位要求" prop="experience">
          <el-input type="text" v-model="add.experience"></el-input>
        </el-form-item>
        <el-form-item label="工作内容" prop="description">
          <el-input type="text" v-model="add.description"></el-input>
        </el-form-item>
        <el-form-item label="招聘人数" prop="number">
          <el-input
            type="text"
            oninput="value=value.replace(/[^\d]/g,'')"
            v-model="add.number"
          ></el-input>
        </el-form-item>
        <el-form-item label="最低薪资" prop="sallow">
          <el-input
            type="text"
            oninput="value=value.replace(/[^\d]/g,'')"
            v-model="add.sallow"
          ></el-input>
        </el-form-item>
        <el-form-item label="最高薪资" prop="salhi">
          <el-input
            type="text"
            oninput="value=value.replace(/[^\d]/g,'')"
            v-model="add.salhi"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="register-button" slot="footer">
        <el-button @click="reset('addRef')">取 消</el-button>
        <el-button type="primary" @click="commit()">提交修改</el-button>
      </div>
    </el-dialog>
    <el-table :data="form" border>
      <el-table-column label="加急" width="100">
        <template slot-scope="scope1">
          <el-button @click="up(scope1.row.id)" type="text" size="small"
            >去充钱</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="job"
        label="职位名称"
        width="135"
      ></el-table-column>
      <el-table-column
        prop="validTime"
        label="截止日期"
        width="110"
      ></el-table-column>
      <el-table-column prop="experience" label="职位要求"></el-table-column>
      <el-table-column prop="description" label="职位描述"></el-table-column>
      <el-table-column
        prop="number"
        label="招聘人数"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="sallow"
        label="最低薪资"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="salhi"
        label="最高薪资"
        width="100"
      ></el-table-column>
      <el-table-column prop="wit" label="权重" width="80"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            @click="showEditDialog(scope.row.id)"
            type="text"
            size="small"
            >编辑</el-button
          >
          |
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="算了"
            icon="el-icon-info"
            icon-color="red"
            title="确定要删除这条内容吗？"
            @confirm="deleteInfo(scope.row.id)"
          >
            <el-button slot="reference" type="text" size="small"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      title="充钱使你变强"
      :visible.sync="drawer"
      class="pay-box"
      :before-close="payed"
    >
      <span
        >请输入充值金额，充越多排越前 <br /><br />&emsp;&emsp;支持小数点后两位
        <br /><br />&emsp;&emsp;目前仅支持alipay </span
      ><br /><br />
      <div class="willpay">
        <el-input
          v-model="pay.num"
          @input="changeStart"
          style="width: 200px; display: inline"
        ></el-input>
        &emsp;&emsp;
        <el-button type="primary" style="display: inline" @click="willpay" round
          >确认金额</el-button
        >
      </div>
      <!-- 扫码付款模块 -->

      <el-card id="alipay" v-if="showpay" class="box-card" shadow="never">
        <el-image
          style="width: 200px; height: 200px"
          :src="pay.img"
          fit="fill"
        ></el-image
        ><br />
        <el-button type="primary" @click="payed" round>我已付款</el-button>
      </el-card>
    </el-drawer>
    <!--    编辑-->
    <el-dialog
      title="编辑"
      :close-on-click-modal="false"
      :visible.sync="editDialog"
    >
      <el-form
        status-icon
        :model="editForm"
        ref="editFormRef"
        label-width="70px"
      >
        <el-form-item label="招聘职位" prop="job">
          <el-input type="text" v-model="editForm.job"></el-input>
        </el-form-item>
        <el-form-item label="最低薪资" prop="sallow">
          <el-input
            type="text"
            oninput="value=value.replace(/[^\d]/g,'')"
            v-model="editForm.sallow"
          ></el-input>
        </el-form-item>
        <el-form-item label="最高薪资" prop="salhi">
          <el-input
            type="text"
            oninput="value=value.replace(/[^\d]/g,'')"
            v-model="editForm.salhi"
          ></el-input>
        </el-form-item>
        <el-form-item label="截止日期" prop="validTime">
          <!-- <el-input type="text" v-model="editForm.validTime"></el-input> -->
          <el-date-picker
            v-model="editForm.validTime"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="职位要求" prop="experience">
          <el-input type="text" v-model="editForm.experience"></el-input>
        </el-form-item>
        <el-form-item label="招聘人数" prop="number">
          <el-input
            type="text"
            oninput="value=value.replace(/[^\d]/g,'')"
            v-model="editForm.number"
          ></el-input>
        </el-form-item>
        <el-form-item label="职位描述" prop="description">
          <el-input type="text" v-model="editForm.description"></el-input>
        </el-form-item>
      </el-form>
      <div class="register-button" slot="footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="editInfo('editFormRef')"
          >提交修改</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<style>
.pay-box {
  text-align: center;
  margin: 15px, center;
}
.but1 {
  margin: 10px 600px 10px;
}
.box-card {
  width: 455px;
  margin-top: 15px;
}
.willpay {
  width: 300px;
  margin-left: 80px;
  text-align: center;
  display: flex;
  flex-direction: row;
}
</style>
<script>
export default {
  inject: ["reload"],
  data() {
    return {
      form: [],
      add: {},
      editForm: {},
      showpay: false,
      dialogFormVisible: false,
      editDialog: false,
      drawer: false,
      pay: {
        jid: null,
        img: null,
        num: null,
        no: null,
      },
    };
  },
  methods: {
    //格式化时间
    fromat() {
      const d = new Date(this.editForm.validTime);
      const resDate =
        d.getFullYear() +
        "-" +
        this.p(d.getMonth() + 1) +
        "-" +
        this.p(d.getDate());
      // const resTime = this.p(d.getHours()) + ':' + this.p(d.getMinutes()) + ':' + this.p(d.getSeconds());
      this.editForm.validTime = resDate;
    },
    p(s) {
      return s < 10 ? "0" + s : s;
    },
    // 获取职位信息
    getJob() {
      var id = this.$store.state.userId;
      console.log("获取userId:", id);
      var url = this.$store.state.ip + "/job/getJob";
      // 参数
      let param = new URLSearchParams();
      param.append("com", id);
      this.$axios({
        method: "post",
        url: url,
        data: param,
      }).then((res) => {
        console.log(res.data);
        this.form = res.data;
      });
    },
    //右上角X 关闭注册对话框 重置表单
    closeDialog(formNameRef) {
      this.$refs[formNameRef].resetFields();
    },
    reset(formNameRef) {
      this.$refs[formNameRef].resetFields();
      this.dialogFormVisible = false;
    },
    // 提交信息
    commit() {
      //格式化时间
      const d = new Date(this.add.validTime);
      const resDate =
        d.getFullYear() +
        "-" +
        this.p(d.getMonth() + 1) +
        "-" +
        this.p(d.getDate());
      this.add.validTime = resDate;

      var id = this.$store.state.userId;
      console.log("获取userId:", id);
      var url = this.$store.state.ip + "/job/insertJob";
      // 参数
      let param = new URLSearchParams(this.add);
      param.append("com", id);
      this.$axios({
        method: "post",
        url: url,
        data: param,
      }).then((res) => {
        console.log(res.data);
        this.$router.go(0);
      });
      this.dialogFormVisible = false;
      this.$refs[formNameRef].resetFields();
    },
    // 修改
    showEditDialog(id) {
      this.editDialog = true;
      console.log("职位的id：", id);
      var url = this.$store.state.ip + "/job/getJobById";
      let param = new URLSearchParams();
      param.append("id", id);
      this.$axios({
        method: "post",
        url: url,
        data: param,
      }).then((res) => {
        console.log(res.data);
        this.editForm = res.data;
      });
    },
    // 提交修改信息
    editInfo(editFormRef) {
      this.fromat();
      var url = this.$store.state.ip + "/job/updaeJob";
      // 参数
      let param = new URLSearchParams(this.editForm);
      this.$axios({
        method: "post",
        url: url,
        data: param,
      }).then((res) => {
        console.log(res.data);
        this.editDialog = false;
        this.$router.go(0);
      });
    },
    // 删除职位
    deleteInfo(id) {
      var url = this.$store.state.ip + "/job/deleteJob";
      // 参数
      let param = new URLSearchParams();
      param.append("id", id);
      this.$axios({
        method: "post",
        url: url,
        data: param,
      }).then((res) => {
        console.log(res.data);
        this.$router.go(0);
      });
    },
    strFormatNum(val) {
      //清除“数字”和“.”以外的字符
      val = val.replace(/[^\d.]/g, "");
      //只保留第一个. 清除多余的
      val = val.replace(/\.{2,}/g, ".");
      val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      //只能输入两个小数
      val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
      if (val.indexOf(".") < 0 && val != "") {
        //如果没有小数点，首位不能为类似于 01、02的金额
        val = parseFloat(val);
      }
      return val;
    },
    changeStart(value) {
      console.log(`监听输入框的改变 start`, value);
      setTimeout(() => {
        this.pay.num = this.strFormatNum(value);
      }, 30);
    },
    // 充钱
    up(jid) {
      this.drawer = true;
      this.pay.jid = jid;
    },
    // 已输入金额，创建订单
    willpay() {
      let num = this.pay.num;
      if (num == 0 || num == null) {
        alert("金额不能为空");
        return;
      }
      var url = this.$store.state.ip + "/job/createOrder";
      // 参数
      let param = new URLSearchParams();
      param.append("num", num);
      this.$axios({
        method: "post",
        url: url,
        data: param,
      }).then((res) => {
        // let encoder = new TextEncoder('utf8');
        // this.pay.text = encoder.encode(res.data.qr);
        this.pay.img =
          "https://gra-1257734071.cos.ap-guangzhou.myqcloud.com/pay/" +
          res.data.qr;
        this.pay.no = res.data.no;
        console.log(this.pay.img);
        console.log("订单号:", this.pay.no);
        this.showpay = true;
      });
    },
    payed() {
      if (this.showpay == false) {
        this.drawer = false;
        return;
      }
      let num = this.pay.num;
      let no = this.pay.no;
      let jid = this.pay.jid;
      // console.log(no);
      // console.log(num);
      // console.log(jid);
      var url = this.$store.state.ip + "/job/updateWit";
      // 参数
      let param = new URLSearchParams();
      param.append("num", num);
      param.append("no", no);
      param.append("id", jid);
      this.$axios({
        method: "post",
        url: url,
        data: param,
      }).then((res) => {
        console.log("查询订单情况：", res.data);
        if (res.data == 0) {
          this.$confirm("未支付！确认关闭？")
            .then((_) => {
              this.pay.num = null;
              this.drawer = false;
              this.pay.img = null;
              this.showpay = false;
            })
            .catch((_) => {});
        } else {
          //保存订单信息
          var url = this.$store.state.ip + "/orders/insert";
          let comid = this.$store.state.userId;
          // 参数
          let param = new URLSearchParams();
          param.append("total", num);
          param.append("comid", comid);
          param.append("jobid", jid);
          param.append("time", "2022-03-25");
          
          this.$axios({
            method: "post",
            url: url,
            data: param,
          }).then((res) => {});

          this.pay.num = null;
          this.drawer = false;
          this.pay.img = null;
          this.showpay = false;
          this.$router.go(0);
        }
      });
    },
  },
  created() {
    this.getJob();
  },
  mounted() {},
};
</script>